---
title: Next.js
description: Install and configure Next.js.
---

<Callout>

A <Link href="https://github.com/udecode/plate/tree/main/templates/plate-template">template</Link> is available to help you get started quickly.

</Callout>

<Steps>

### Create project

Start by creating a new Next.js project using `create-next-app`:

```bash
npx create-next-app@latest my-app --typescript --tailwind --eslint
```

### Run the CLI

```bash
npx @udecode/plate-ui@latest init
```

### Configure plate-components.json

You will be asked a few questions to configure `plate-components.json`:

```txt showLineNumbers
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Do you want to use CSS variables for colors? › no / yes
```

### Fonts

We use <Link href="https://rsms.me/inter/">Inter</Link> as the default font. Inter is not required. You can replace it with any other font.

Here's how you can configure Inter for Next.js:

**1. Import the font in the root layout:**

```js showLineNumbers title=app/layout.tsx {2,5-8,16-17}
import "@/styles/globals.css"
import { Inter as FontSans } from "next/font/google"

import { cn } from "@udecode/cn"

export const fontSans = FontSans({
  subsets: ["latin"],
  variable: "--font-sans",
})

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body
        className={cn(
          "min-h-screen bg-background font-sans antialiased",
          fontSans.variable
        )}
      >
        ...
      </body>
    </html>
  )
}
```

**2. Configure `theme.extend.fontFamily` in `tailwind.config.js`**

```js showLineNumbers title=tailwind.config.js {9-11}
const { fontFamily } = require("tailwindcss/defaultTheme")

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-sans)", ...fontFamily.sans],
      },
    },
  },
}
```

### App structure

Here's how we structure our Next.js apps. You can use this as a reference:

```txt {7-11,15-18}
.
├── src
│   ├── app
│   │   ├── layout.tsx
│   │   └── page.tsx
│   │   components
│   │   ├── ui
│   │   │   ├── button.tsx
│   │   │   ├── dropdown-menu.tsx
│   │   │   ├── paragraph-element.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   │   styles
│   │   └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.json
```

- We place the UI components in the `components/ui` folder. If you already have one and want to keep them separated, you could use `components/plate-ui`.
- The rest of the components such as `<PageHeader />` and `<MainNav />` are placed in the `components` folder.
- The `styles` folder contains the global CSS.

### Add TooltipProvider

Wrap your editor with `TooltipProvider`. Here's an example:

<ComponentSource src="../../templates/plate-template/src/app/layout.tsx" />

### Add icons

Add the icons you'll use in `components/icons.tsx`:

<ComponentSource src="../../templates/plate-playground-template/src/components/icons.tsx" />

We use icons from <Link href="https://lucide.dev">Lucide</Link>. You can use any icon library you want.

### Add components

You can now start adding components to your project.

```bash
npx @udecode/plate-ui@latest add button
```

The command above will add the `Button` component to your project. You can then import it like this:

```tsx {1,6} showLineNumbers
import { Button } from '@/components/plate-ui/button';

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}
```

### Register components

To add the components to your plugins, see [Plugin Components](/docs/plugin-components#register-components).

</Steps>
